<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格元素</title>
	</head>
	<body>
		<h1>1.简单表格元素</h1>
		<!-- 多层元素嵌套形成表格：页面布局【栅格布局】
		     定义表格 table表格外区域元素+tr行元素+td单元格元素【构建结构，无法直接显示】
			 table元素的属性  border边框属性
			                 width和height宽高属性
							 cellspacing外边距属性：表格外边框与单元格的距离
							 cellpadding内边距属性：单元格与内容的距离
		  tr元素的属性        bgcolor背景颜色
		  td元素的属性        rowspan 跨行属性 数值没有单位【整数】
		                     口诀：跨行超过，删除下一行单元格
		                     colspan 跨列属性 数值没有单位【整数】
							 口诀：跨列超过1，删除对应行当中的单元格
		 ，使用表格【4行4列表格】 快捷键：table>tr*4>td*4-->
		 <h1>2.简单表格元素</h1>
		 <table border="1" width="260px" height="260px" cellspacing="0px" cellpadding="0px">
		 	<tr bgcolor="red">
		 		<td colspan="2">1</td>
		 		
		 		<td rowspan="3">1</td>
		 		<td>1</td>
		 	</tr>
		 	<tr bgcolor="yellow">
		 		
		 		
		 		<td colspan="2" rowspan="2">2</td>
		 		<td>2</td>
		 	</tr>
		 	<tr bgcolor="blue">
		 		
		 		<td>3</td>
		 		
		 	</tr>
		 	<tr>
		 		<td>4</td>
		 		<td>4</td>
		 		<td>4</td>
		 		<td>4</td>
		 	</tr>
		 </table>
		 <!-- 3.简单表格 -->
		 <h1>3.简单表格</h1>
		 <table border="1" width="260px" height="260px" cellspacing="0px" cellpadding="0px">
		 	<tr>
		 		<td colspan="2"></td>
		 		
		 		<td rowspan="2"></td>
		 	</tr>
		 	<tr>
		 		<td rowspan="2"></td>
		 		<td></td>
		 		
		 	</tr>
		 	<tr>
		 		
		 		<td colspan="2"></td>
		 		
		 	</tr>
		 </table>